@function rem($px) {
    @return ($px / 100) * 1rem;
}

@mixin ele-texture($url, $width, $height) {
    width: $width;
    height: $height;
    background-image: url('../img/'+$url);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

@mixin flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@mixin flex-justify-content($direction) {
    -webkit-box-pack: $direction;
    -ms-flex-pack: $direction;
    justify-content: $direction;
}

@mixin flex-align-items($direction) {
    -webkit-box-align: $direction;
    -ms-flex-align: $direction;
    align-items: $direction;
}

@mixin text-shadow($color) {
    text-shadow: $color 1px 0 0, $color 0 1px 0, $color -1px 0 0, $color 0 -1px 0;
}

@mixin linear-gradient($color1, $color2) {
    // background: -webkit-gradient(linear, left top, left bottom, from($color1), to($color2));
    // background: linear-gradient(to bottom, $color1, $color2);
    background: -webkit-gradient(linear, left top, left bottom, from($color1), to($color2));
    background: linear-gradient(to bottom, $color1, $color2);

}

@mixin ellipsis {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

@mixin flex-size($size){
    -webkit-box-flex:$size;
            -ms-flex:$size;
                flex:$size;
}


@font-face {
    font-family: 'ZIHUN';   /*字体名称*/
    src: 
        //url('../font/font.eot') format('embedded-opentype'), /* IE6-IE8 */
        //url('../font/font.woff') format('woff'),
        url('../font/ZIHUN152.ttf?1') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        //url('../font/font.svg') format('svg'); /* iOS 4.1- */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'YAHEIBOLD';   /*字体名称*/
    src: 
        //url('../font/font.eot') format('embedded-opentype'), /* IE6-IE8 */
        //url('../font/font.woff') format('woff'),
        url('../font/yaheibold.ttf?1') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        //url('../font/font.svg') format('svg'); /* iOS 4.1- */
    font-weight: normal;
    font-style: normal;
}

// @font-face {
//     font-family: 'SIYUAN';   /*字体名称*/
//     src: 
//         //url('../font/font.eot') format('embedded-opentype'), /* IE6-IE8 */
//         //url('../font/font.woff') format('woff'),
//         url('../font/siyuanbold.otf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
//         //url('../font/font.svg') format('svg'); /* iOS 4.1- */
//     font-weight: normal;
//     font-style: normal;
// }


html {
    font-size: 13.33333333vw;
}

// /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
// ::-webkit-scrollbar{
//     width: 4px;
//     height: 4px;
//     background-color: transparent;
// }
// /*定义滚动条的轨道，内阴影及圆角*/
// ::-webkit-scrollbar-track{
//     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
//     border-radius: 10px;
// }
// /*定义滑块，内阴影及圆角*/
// ::-webkit-scrollbar-thumb{
//     /*width: 10px;*/
//     height: 20px;
//     border-radius: 10px;
//     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
//     background-color: #555;
// }

.swiper-button-prev,.swiper-button-next{
    width:rem(50) !important;
    height:rem(50) !important;
    background-size: rem(50) rem(50) !important;
}

.swiper-button-disabled{
    opacity: 1 !important;
}

#scene-2 .swiper-button-prev{
    left:rem(40) !important
}
#scene-2 .swiper-button-next{
    right:rem(40) !important
}

.swiper-button-prev{
    background-image:url('') !important;
}
.swiper-button-next{
    background-image:url('') !important;
}

#swiper-department{
    overflow: visible !important;
}


@media (min-width: 560px) {
    html {
      font-size: 54px;
    }
    .container {
      width: 7.5rem;
      margin: 0 auto;
      position: relative;
    }
  }

* {
    margin: 0;
    padding: 0;
    outline:none;
    -webkit-tap-highlight-color:transparent;//方法一
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);//方法二
    tap-highlight-color: rgba(0, 0, 0, 0);//方法三
}

.pc-bg{
    background-image: url('../img/pc-bg.jpg?12');
    background-size: 100% 100%;
}

// body:before {
//     width: 100%;
//     height: 100%;
//     content: ' ';
//     position: fixed;
//     z-index: -1;
//     top: 0;
//     left: 0;
//     background: #fff;
//   }


html,
body {
    width: 100%;
    height: 100%;
    // background-color:#000;
}


.music{
    display: none;
}

.container {
    height: 100%;
    background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;

    .section {
        height: 100%;
        .warp {
            height: 100%;
            //background-image: url(../img/bg.jpg);
            overflow: hidden;
           
            @include flex();
            @include flex-justify-content(center);
            @include flex-align-items(center);

            .content {
                @include flex();
                width: 100%;
                height: rem(1120);
                //background-color: rgba(0, 0, 0, .3);
                position: relative;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;

                .swiper-container{
                    -webkit-transform:translate3d(0,0,0);
                            transform:translate3d(0,0,0);
                    overflow:hidden;
                }

                
                .back,.music{
                    z-index: 99;
                }

                .music {
                    position: absolute;
                    @include ele-texture('music.png', rem(39), rem(42));
                }

                .music.pause{
                    @include ele-texture('pause.png', rem(39), rem(42));
                }

                
            

            }
        }
    }
}

#loading {
    .warp{
        background-image: url(../img/bg.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    .content {
        @include flex-align-items(center);
        @include flex-justify-content(center);
        
        .music{
            right: rem(45);
            top: rem(25);
        }
    }
    .ele-loading {
        @include ele-texture('loading.png?1', rem(205), rem(52));
    }
}

/*档案馆*/
#scene-1 {
    .content {
        @include flex-align-items(center);
        .ele-logo {
            max-width:rem(80);
            position: absolute;
            left: rem(45);
            top: rem(-55)
        }
        .music{
            right: rem(45);
            top: rem(25);
        }
    }

    .title {
        // @include ele-texture('s1-title.png', rem(385), rem(109));
        height: rem(109);
        margin-top: rem(25);
        color:#fff;
        font-style: italic;
        font-weight: bold;
        text-align: center;
        .team{
            font-size:rem(40);
        }
        .tip{
            font-size:rem(30);
            margin-top:rem(10);
        }
    }

    .lan-btn {
        position: absolute;
        right: rem(17);
        top: rem(-20)
    }

    .lan-btn.en {
        @include ele-texture('s1-cn-btn.png', rem(100), rem(41));
    }

    .lan-btn.cn {
        @include ele-texture('s1-en-btn.png', rem(100), rem(41));
    }

    .item {
        width: rem(720);
        height: rem(305);
        background-color: #ffffff;
        border: 1px solid #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: rem(20);
        margin-top: rem(23);
        overflow: hidden;
        @include flex();
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        .banner {
            width:100%;
            border-top-right-radius: rem(20);
            border-top-left-radius: rem(20);
            height: rem(240);
            overflow: hidden;
            .face {
                width:100%;
                height: rem(240);
                border-top-right-radius: rem(20);
                border-top-left-radius: rem(20);
                -webkit-transform:translate3d(0,0,0);
                        transform:translate3d(0,0,0);
            }
        }

        

        .caption {
            font-size: rem(28);
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            @include flex();
            @include flex-align-items(center);
            text-indent: rem(30);
            font-weight: bold;
            font-style: italic
        }
    }

}

/*获奖名单*/
#scene-2 {
    .content {
        @include flex-align-items(center);
        // .ele-logo {
        //     position: absolute;
        //     @include ele-texture('logo.png', rem(62), rem(51));
        //     left: rem(45);
        //     top: rem(25)
        // }

        .back {
            position: absolute;
            @include ele-texture('back.png?1', rem(58), rem(48));
            left: rem(45);
            top: 50%;
            margin-top:rem(-600)
        }

        .music{
            right: rem(45);
            top: rem(25);
        }
        .year-box{
            position: absolute;
            @include ele-texture('year-box.png', rem(169), rem(37));
            left: rem(100);
            top: rem(195);
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            background-color: transparent;
            border:none;
            text-indent: rem(20);
            font-style: italic;
            z-index: 2;
        }
        .month-text{
            position: absolute;
            font-size:rem(30);
            color:#fff;
            width:rem(160);
            height:rem(50);
            left: rem(192);
            top: rem(6);
            font-weight: bold;
            font-style: italic;
            @include text-shadow(#0a0f14);
            text-align: center;
        }
    }

    .title {
        // @include ele-texture('s2-title.png', rem(355), rem(144));
        color:#fff;
        font-style: italic;
        font-weight: bold;
        text-align: center;
        height:rem(144);
        
        .month{
            font-size:rem(30);
            margin-top:rem(10)
        }
        .tip{
            font-size:rem(40);
            margin-top:rem(10);
        }
        .tip2{
            font-size:rem(30);
            margin-top:rem(10);
        }
    }

    .swiper-container {
        width: 100%;
        height: rem(727);
        margin-top: rem(60);

        .swiper-slide {
            -webkit-transform:translate3d(0,0,0);
                        transform:translate3d(0,0,0);

            @include ele-texture('swiper-slide-bg.png?2', rem(556), rem(806));
            position: relative;

            -webkit-transition: 300ms;
            transition: 300ms;
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
            @include flex();
            @include flex-justify-content(center);
            @include flex-align-items(center);

            .scroll-box {
                width:100%;
                overflow-y: auto;
                padding:0 rem(30) 0 rem(30);
                height: rem(610);
                margin-top:rem(50);
                position: relative;
                visibility: hidden;
                opacity: 0;
                transition:all 1s;
                -webkit-transition:all 1s; /* Safari and Chrome */

                .department {
                    
                    margin-bottom: rem(35);

                    .branch {
                
                        color: #0c1e5a;
                        
                        @include flex();
                        @include flex-justify-content(center);
                        text-align: center;
                        margin-bottom:rem(20);
                        
                        span{
                            background-color:#7ab9f0;
                            padding:rem(5) rem(20);
                            font-size:rem(34);
                            color:#fff;
                            font-weight: bold;
                            border: 1px solid #0a0f14;
                            border-radius: rem(20);
                            @include text-shadow(#0a0f14);
                            -webkit-box-shadow: 0px 2px 0px 0px #173985;
                            box-shadow: 0px 2px 0px 0px #173985;
                        }
                        // @include ellipsis()
                    }

                    .gather {
                        -webkit-box-flex:1;
                            -ms-flex:1;
                                flex:1;
                        .gather-item{
                            // @include flex();
                            // @include flex-align-items(center);
                            // @include flex-justify-content(space-between);
                           
                            
                            margin-bottom: rem(15);
                        }
                        .dept2{
                            font-size: rem(28);
                            @include flex-size(1);
                            color: #172554;
                            text-align: center;
                            margin-bottom:rem(10);
                            margin-top:rem(20)
                        }
                        .item {
                            //width:rem(350);
                            @include flex();
                            // height: rem(50);
                            @include flex-align-items(center);
                            padding:rem(4) 0;
                            background: -webkit-gradient(linear, left top, right top, from(#80e0db), to(#489df2));
                            background: linear-gradient(to right, #80e0db, #489df2);
                            border: 1px solid #552121;
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                            border-radius: rem(8);
                            font-size: rem(28);
                            -webkit-box-shadow: 0px 1px 0px 0px #173985;
                            box-shadow: 0px 1px 0px 0px #173985;
                            @include flex-size(1);
                            margin-bottom:rem(15);
                            

                            .reward {
                                -webkit-box-flex: 5;
                                -ms-flex: 5;
                                flex: 5;
                                padding-left: rem(20);
                                color: #172554;
                                // @include ellipsis()
                            }

                            .name {
                                -webkit-box-flex: 3;
                                -ms-flex: 3;
                                flex: 3;
                                text-align: center;
                                color: #fff;
                            }
                        }

                        .gather-item:last-child {
                            margin-bottom: 0
                        }
                    }
                }

                .department:last-child {
                    margin-bottom: 0
                }
            }
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        .swiper-slide-active .scroll-box{
            opacity: 1;
            visibility: visible;
            
        }

    }

    .swiper-slide::before {
        content: '';
        @include ele-texture('arr_top.png', rem(36), rem(24));
        position: absolute;
        top: rem(75);
        left: 50%;
        margin-left: rem(-18)
    }

    .swiper-slide::after {
        content: '';
        @include ele-texture('arr_bottom.png', rem(36), rem(24));
        position: absolute;
        bottom: rem(30);
        left: 50%;
        margin-left: rem(-18)
    }

    .touch.cn {
        @include ele-texture('touch.png', rem(247), rem(37));
        margin-top: rem(110);
        -webkit-animation:leftRight 1s infinite alternate;
                    animation:leftRight 1s infinite alternate;
    }
    .touch.en {
        @include ele-texture('touch-en.png', rem(399), rem(37));
        margin-top: rem(110);
        -webkit-animation:leftRight 1s infinite alternate;
                    animation:leftRight 1s infinite alternate;
    }
}



/*获奖人*/
#scene-3 {

    .swiper-button-next, .swiper-button-prev {
        position: absolute;
        left: 50%;
        width: 27px;
        height: 44px;
        margin-left: -10px;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        top:50%;
    }
    .swiper-button-next{
        margin-top:rem(550)
    }

    .swiper-button-prev{
        margin-top:rem(-590)
    }

    .content {

        height: 100%;
        position: relative;

        .back {
            position: absolute;
            @include ele-texture('back.png?1', rem(58), rem(48));
            left: rem(45);
            top: 50%;
            margin-top:rem(-535)
        }
        .music{
            right: rem(45);
            top: 50%;
            margin-top:rem(-535)
        }

        @include flex();
                @include flex-justify-content(center);
                @include flex-align-items(center);
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;



        .pep-box {
            -webkit-transform:translate3d(0,0,0);
                transform:translate3d(0,0,0);
                @include ele-texture('pep-bg.png?2', rem(679), rem(982));
                
 
            
            position: relative;

            .avatar {
                width: rem(290);
                height: rem(290);
                border-radius: 100%;
                position: absolute;
                left: rem(200);
                top: rem(22)
            }

            .name {
                
                color: #fff;
                width: rem(510);
                height: rem(115);
                position: absolute;
                left: rem(88);
                top: rem(348);
                @include flex();
                @include flex-justify-content(center);
                @include flex-align-items(center);
                -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
                    font-family: 'ZIHUN';
                
                .name-text{
                    font-size: rem(60);
                    @include text-shadow(#10254a);
                    font-family: 'YAHEIBOLD';
                }

                .dept {
                    font-size: rem(26);
                    @include text-shadow(#10254a);
                    //font-family: 'SIYUAN';
                }
                .dept2 {
                    font-size: rem(24);
                    @include text-shadow(#10254a);
                }
            }

            .depict {
                font-size: rem(38);
                color: #fff;
                width: rem(560);
                height: rem(70);
                text-align: center;
                line-height: rem(70);
                position: absolute;
                left: rem(56);
                top: rem(497);
                @include text-shadow(#10254a);
               // font-weight: bold;
                font-family: 'ZIHUN';
                font-style: italic;
                letter-spacing:5px;
                white-space: nowrap;
            }

            .reason {
                color: #fff;
                position: absolute;
                left: rem(50);
                top: rem(595);
                @include text-shadow(#10254a);
                
                .hd {
                    font-size: rem(36);
                    font-family: 'ZIHUN';
                    //font-style: italic;
                }

                .bd {
                    font-size: rem(30);
                    margin-top: rem(10);
                    font-family: 'YAHEIBOLD';
                    max-height: rem(230);
                    overflow-y: scroll;
                    padding-right:rem(20);
                    margin-right:rem(20);
                    word-break:break-all;
                }
            }

            .go-pep-page {
                position: absolute;
                @include ele-texture('go-pep-page.png', rem(215), rem(40));
                right: rem(50);
                bottom: rem(50);
            }

            .go-pep-page.cn {
                position: absolute;
                @include ele-texture('go-pep-page.png', rem(215), rem(40));
                right: rem(50);
                bottom: rem(50);
            }

            .go-pep-page.en {
                position: absolute;
                @include ele-texture('go-pep-page-en.png', rem(383), rem(40));
                right: rem(50);
                bottom: rem(50);
            }

            .like {
                position: absolute;
                right: rem(100);
                top: rem(250);

                .ico {
                    @include ele-texture('hart.png', rem(61), rem(54));
                    -webkit-animation:zoom 1s infinite alternate;
                    animation:zoom 1s infinite alternate;
                }

                .num {
                    font-size: rem(24);
                    color: #ff66ae;
                    text-align: center
                }
            }
        }

        .swiper-arr {
            @include ele-texture('swiper-arr.png', rem(34), rem(32));
            margin-top: rem(20);
            -webkit-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
            -webkit-animation:fadeInOut 1s infinite;
                    animation:fadeInOut 1s infinite;
        }

        .create-btn {
            @include ele-texture('create-btn.png?2', rem(222), rem(53));
            margin-top: rem(10);
            -webkit-transform:translate3d(0,0,0);
            transform:translate3d(0,0,0);
            font-weight: bold;
            color:#203870;
            font-size:rem(24);
            text-align: center;
            line-height: rem(48)
        }
    }
}



/*编辑页*/
#scene-4 {
    .content {
        @include flex-align-items(center);
        width:100%;
        overflow: hidden;

        .back {
            position: absolute;
            @include ele-texture('back.png?1', rem(58), rem(48));
            left: rem(45);
            top: rem(25)
        }
        .music{
            right: rem(45);
            top: rem(25);
        }

        .photo-box {
            width: rem(750);
            height: rem(750);
            border-radius: rem(50);
            @include flex();
            @include flex-align-items(center);
            @include flex-justify-content(center);
            -ms-flex-negative: 0;
                flex-shrink: 0;
            position: relative;
            overflow: hidden;
            .photo {
                width: rem(720);
                height: rem(720);
                border-radius: rem(50);
            }

            .edit-bar{
                position:absolute;
                @include ele-texture('edit-bar.png', rem(124), rem(74));
                right:rem(50);
                bottom:rem(50);
                display: none;
            }

            .move{
                position:absolute;

                .close {
                    position: absolute;
                    z-index: 2;
                    @include ele-texture('remove.png', rem(40), rem(40));
                    display: none;
                    left:rem(-20);
                    top:rem(-20)
                }

                .rotate {
                    position: absolute;
                    z-index: 2;
                    @include ele-texture('scale.png', rem(40), rem(40));
                    right:rem(-15);
                    bottom:rem(10);
                    display: none;
                }

            }

            .move img{
                border:1px solid transparent;
            }

            .move.active img{
                border:1px solid #ff6600;
            }

            .move.active .close,.move.active .rotate {
                display: block;
            }


            .move img{
                height:rem(150)
            }

            .border-box{
                width:rem(750);
                height:rem(750);
                position: absolute;
                left:0;
                top:0;
                display: none;
            }

        }

        #photo-box.pos{
            position: absolute;
            transform: scale3d(0.3,0.3,0.3);
            -webkit-transform: scale3d(0.3,0.3,0.3);
            transform-origin:center center;
            -webkit-transform-origin:center center;
            top:rem(-260);
            z-index: 1;
        }

        $color: (
            (color1: #ffffff, color2: #ffffff),
            (color1: #e7c0f6, color2: #e7c0f6),
            (color1: #f0be0e, color2: #f0be0e),
            (color1: #fe748e, color2: #ff7dad),
            (color1: #cbf9bf, color2: #fcb5be),
            (color1: #df6240, color2: #df6240),
            (color1: #68e0cf, color2: #167df2),
        );

        @for $i from 1 through length($color) {
            $item: nth($color, $i);
            .style-#{$i} {
                @include linear-gradient(map-get($item, color1), map-get($item, color2))
            }
        }

        .edit-box{
            .box{
                width:rem(695);
                height:rem(110);
                background-color: #eaeaf2;
                border-radius: rem(20);
                margin-top:rem(30);
                @include flex();
                .lable{
                    width:rem(110);
                    height:rem(110);
                    background-color: #c8ccdf;
                    border-radius: rem(20);
                    border: 1px solid #c0c4d3;
                    -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                    @include flex();
                    @include flex-align-items(center);
                    @include flex-justify-content(center);
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                            flex-direction: column;
                    .ico{
                        margin-top:rem(20);
                    }
                    .border{
                        width:rem(50);
                        height:rem(50);
                        border: 2px solid #0d296a;
                        background-color: #c8ccdf;
                        -webkit-box-sizing: border-box;
                                box-sizing: border-box;
                        
                    }
                    .face{
                        @include ele-texture('face.png', rem(52), rem(52));
                    }
                    
                    .name{
                        font-size:rem(18);
                        color:#203870;
                    }
                }
                .scroll-view{
                    -webkit-box-flex:1;
                        -ms-flex:1;
                            flex:1;
                            margin:0 rem(10);
                    @include flex();
                    @include flex-align-items(center);
                    overflow-x: auto;
                    .border-style{
                        width:rem(50);
                        height:rem(70);
                        position: relative;
                        -ms-flex-negative: 0;
                            flex-shrink: 0;
                        border: 1px solid #4a1212;
                        -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                            margin:0 rem(20)
                    }
                    .border-style::after{
                        content: '';
                        width:rem(30);
                        height:rem(50);
                        border: 1px solid #4a1212;
                        background-color: #eaeaf2;
                        position: absolute;
                        left:rem(8);
                        top:rem(8);
                        -webkit-box-sizing: border-box;
                            box-sizing: border-box
                    }
                    .tz-style{
                        height:rem(70);
                        margin:0 rem(20)
                    }

                    .edit-border{
                        height:rem(70);
                        margin:0 rem(20)
                    }
                    
                }
            }
            .create-ok.cn{
                @include ele-texture('create-ok.png', rem(149), rem(54));
                margin:rem(20) auto
            }
            .create-ok.en{
                @include ele-texture('create-ok-en.png', rem(149), rem(54));
                margin:rem(20) auto
            }


            
        }

        .pep-info{
            @include ele-texture('pep-info.png?1', rem(723), rem(991));
            position: absolute;
            top:50%;
            left:50%;
            margin-left:rem(-360);
            margin-top:rem(-435);
            .name-info{
                width:rem(400);
                height:rem(90);
                background-color: #4973db;
                border:1px solid #000000;
                border-radius: rem(10);
                margin:rem(115) auto 0;
                @include flex();
                @include flex-justify-content(center);
                @include flex-align-items(center);
                -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                            flex-direction: column;
                position: relative;
                z-index: 2;
                
                .name{
                    font-size:rem(38);
                    color:#fff;
                    @include text-shadow(#10254a);
                    font-weight: bold;
                }
                .department{
                    font-size:rem(20);
                    color:#fff;
                    @include text-shadow(#10254a);
                }
            }
            .prize{
                width:rem(500);
                height:rem(80);
                margin:rem(-40) auto 0;
                background-color: #83d0ff;
                color:#fff;
                font-size:rem(25);
                @include text-shadow(#10254a);
                padding-bottom:rem(10);
                font-weight: bold;
                position: relative;
                z-index: 1;
                @include flex();
                @include flex-justify-content(center);
                @include flex-align-items(flex-end);
                border:1px solid #000000;
                -webkit-box-shadow: 0px 2px 0px 0px #173985;
                            box-shadow: 0px 2px 0px 0px #173985;
                border-radius: rem(10);
                position: relative;
            }
            .prize::after{
                content: '';
                @include ele-texture('zhang.png', rem(53), rem(59));
                    position: absolute;
                    right:-15px;
                    bottom:rem(12);
            }
            .prize-info{
                width:rem(580);
                max-height:rem(635);
                margin:rem(15) auto 0;
                border-radius: rem(40);
                color:#fff;
                font-size:rem(20);
                @include text-shadow(#10254a);
                font-style: italic;
                line-height: rem(40);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 16;
                overflow: hidden;
                word-break:break-all;
                background-color: rgba(255,255,255,.5);
                padding:rem(10) rem(20);
            }
            // .item{
            //     width:rem(490);
            //     padding:rem(5) 0;
            //     background-color: #dadbea;
            //     border-radius: rem(20);
            //     font-size:rem(33);
            //     font-style: italic;
            //     @include flex();
            //     @include flex-align-items(center);
            //     color:#223663;
            //     margin-top:rem(45);
            //     -webkit-box-orient: vertical;
            //         -webkit-box-direction: normal;
            //             -ms-flex-direction: column;
            //                 flex-direction: column;
            // }
            // .save{
            //     @include ele-texture('save.png', rem(145), rem(48));
            //     margin:rem(20) auto
            // }
            // .item:first-child{
            //     @include flex-justify-content(space-around)
            // }
            // .item.depict{
            //     @include flex-justify-content(center)
            // }
            display: none;
        }
        
        
    }
}

.swiper-pagination{
    height:rem(50);
    @include flex();
    @include flex-align-items(center);
    @include flex-justify-content(center)
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #ffffff !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {

    background: #191966 !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0 !important;
}

#swiper-pep .swiper-slide-active{
    position: relative;
    z-index: 999;
}




@-webkit-keyframes fadeInOut
{
    0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1;}
    100% {-webkit-transform: translate3d(0,-5px,0);transform: translate3d(0,-5px,0);opacity: 0;}
}


@keyframes fadeInOut
{
    0% {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1;}
    100% {-webkit-transform: translate3d(0,-5px,0);transform: translate3d(0,-5px,0);opacity: 0;}
}


@-webkit-keyframes leftRight
{
    0% {-webkit-transform: translate3d(-10px,0,0);transform: translate3d(-10px,0,0);}
    100% {-webkit-transform: translate3d(10px,0,0);transform: translate3d(10px,0,0);}
}


@keyframes leftRight
{
    0% {-webkit-transform: translate3d(-10px,0,0);transform: translate3d(-10px,0,0);}
    100% {-webkit-transform: translate3d(10px,0,0);transform: translate3d(10px,0,0);}
}

@-webkit-keyframes zoom
{
    0%{
        -webkit-transform: scale(1);
                transform: scale(1);
        }
        25%{
            -webkit-transform: scale(1.1);
                    transform: scale(1.1);
        }
        50%{
            -webkit-transform: scale(1);
                    transform: scale(1);
        }
        75%{
            -webkit-transform: scale(1.1);
                    transform: scale(1.1);
        }
}

@keyframes zoom
{
    0%{
        -webkit-transform: scale(1);
                transform: scale(1);
        }
        25%{
            -webkit-transform: scale(1.1);
                    transform: scale(1.1);
        }
        50%{
            -webkit-transform: scale(1);
                    transform: scale(1);
        }
        75%{
            -webkit-transform: scale(1.1);
                    transform: scale(1.1);
        }
}



